<template>
  <HeaderNav />
  <article>
    <!-- 网站主体 -->
    <div id="main" class="clearfix">
      <section class="ct" style="width: 1440px">
        <NoContent :show="resources.length == 0" />

        <ResourceItem v-for="(res, index) in resources" :key="index"
                :ext="res.value.ext" :visit-num="res.score"
                :score="res.value.score" :title="res.value.highlight ?? res.value.resourceName"
                :size="res.value.size" :id="res.value.id"
                @click="$router.push({name: 'resource-detail', params: {id: $event}})"/>

        <!-- 分页插件 -->
        <VanPagination v-model="page" :totalItems="total" @click-page="queryResourceByFullSearch"
                       :itemsPerPage="rows" :showPageSize="5" :forceEllipses="true"/>
      </section>
    </div>
  </article>
  <Footer />
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue";
import ResourceItem from "../components/ResourceItem.vue";
import VanPagination from "../components/VanPagination.vue";
import NoContent from "../components/NoContent.vue";
export default {
  components: {
    NoContent,
    HeaderNav,
    Footer,
    ResourceItem,
    VanPagination,
  },
  data(){
    return {
      page: 1,
      rows: 27,
      total: 0 ,
      resources:[],
    }
  },
  created() {
     this.queryResourceByFullSearch();
  },
  methods: {
     queryResourceByFullSearch(){
        this.$api.queryResourcesBySearch(this.page, this.rows, this.$route.query.search).then(ret=> {
           if (ret.status) {
              this.total = ret.data.total ;
              this.resources = ret.data.list ;
           }
        });
     }
  }
}
</script>

<style scoped>
#main > section div.title {
  clear:both;
  width: 100%;
  height: 40px;
  background: linear-gradient(45deg, rgba(0,0,0, .1) 0%, rgba(0,0,0,.3) 50%, rgba(0,0,0,.1) 100%);
  line-height: 40px;
  margin-left: -80px;
  padding: 0 80px;
  font-weight: 800;
}

#main > section div.title.first {
  margin-top: -20px;
}

#main > section div.title  .more-m  {
  font-weight: 400;
  float: right;
  margin-right: 30px;
}
</style>